<!-- 商家故事组件 -->
<template>
  <view class="md-card">
    <view class="md-name">{{ shop.name }}</view>
    <view class="md-info">
      <view class="md-address" @click="guideToShop">
        <view class="icon-box">
          <i class="iconfont icon-a-map"></i>
        </view>
        <view class="md-local">{{ shop.address }}</view>
      </view>
      <view class="md-action">
        <!-- <view class="icon-box" @click="guideToShop">
          <i class="iconfont icon-map-filling1"></i>
        </view> -->
        <!-- <view class="icon-box" @click="phoneToShop(shop.mobile)"> -->
        <i @click="phoneToShop(shop.mobile)" class="iconfont icon-phone"></i>
        <!-- </view> -->
      </view>
    </view>
    <!-- <view class="md-logo">
      <image :src="shop.cover_url" mode="" />
    </view> -->
    <view class="split-line">
      <view class="line"></view>
    </view>
    <view class="label-title">{{ $t("facePay.business") }}</view>
    <view class="md-time">{{ $t("shop.startTime") }}：{{ openTime }}</view>
  </view>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      shop: {}
    };
  },
  created() {
    this.getMdInfo();
  },
  computed: {
    openTime() {
      if (!this.shop?.name) return "";
      if (this.shop.open_status == 0) return this.$t("alipay.close");
      if (this.shop.shop_time_type == 0) {
        return "00:00-23:59";
      } else {
        return this.shop.start_time + "-" + this.shop.end_time;
      }
    }
  },
  methods: {
    getMdInfo() {
      let params = {};
      let mdData = uni.getStorageSync("storeMdData");
      if (!mdData) {
        params["md_id"] = -1;
      }
      this.$allrequest.alipay.getMdInfo(params).then((res) => {
        if (!res.code) {
          this.shop = res.data;
        }
      });
    },
    // 拨打商家电话
    phoneToShop(num) {
      this.$utils.makePhoneCall(num);
    },
    // 导航到店
    guideToShop() {
      uni.openLocation({
        latitude: parseFloat(this.shop.latitude),
        longitude: parseFloat(this.shop.longitude)
      });
    }
  }
};
</script>

<style lang="less" scoped>
.md-card {
  width: 100%;
  background: #ffffff;
  padding: 36rpx 40rpx;
  margin-top: 24rpx;
  .md-name {
    width: 100%;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #262626;
  }
  .md-info {
    width: 100%;
    padding-right: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .md-address {
      display: flex;
      align-items: center;
      margin-top: 8rpx;
      .iconfont {
        color: #000000;
        font-size: 36rpx;
      }
      .md-local {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        max-width: 460rpx;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里是超出几行省略 */
        overflow: hidden;
      }
    }
    .md-action {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .icon-box {
        width: 48rpx;
        height: 48rpx;
        background: #fbeceb;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          color: #f0250e;
        }
      }
      .icon-box:nth-child(2) {
        margin-left: 20rpx;
      }
      .iconfont {
        color: #f0250e;
        font-size: 40rpx;
      }
    }
  }
  .md-logo {
    width: 210rpx;
    height: 210rpx;
    background: #f6f6f6;
    border-radius: 16rpx;
    margin-top: 28rpx;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .split-line {
    width: 100%;
    padding: 46rpx 0 36rpx 0;
    display: flex;
    justify-content: flex-end;
    .line {
      width: 632rpx;
      height: 1px;
      background: #f6f6f6;
    }
  }
  .label-title {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #262626;
  }
  .md-time {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #262626;
    margin-top: 20rpx;
  }
}
</style>
